<template>
  <div>
    <div v-show="!isHidden" style="background-color: #fff; height: 100%;width:225px; border: 1px solid #ddd;border-radius: 4px;box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);"  class="content" :class="{ 'hidden': isHidden}">
      <div style="position: relative;">
        <el-tree node-key="Name" :data="nodeData" :current-node-key="choseNode" :defaultExpandAll="defaultExpandAll" :highlight-current="true" :expand-on-click-node="false" :default-expanded-keys="expandArray"
          @node-click="handleNodeClick" :props="defaultProps" style="width:222px;">
          <span slot-scope="{ node }" style="width: 90%;">
            <span class="blue-on-hover" style="display: flex; align-items: center;" @mouseover="node.data.edit = true" @mouseleave="node.data.edit = false">
              <div v-show="node.level === 1" style="width:100%;display: flex;justify-content: space-between;align-items: center;">
                <span style="font-size:15px;font-family: Verdana;display:inline-block">{{ node.label }}</span>
                <el-tooltip class="item" effect="dark" :content="`新增${dialogName}`" placement="top">
                  <i v-show="addTemplate" @click.stop="addNew" class="el-icon-plus" style="color: #c2c2c2;padding-right:10px;cursor: pointer"></i>
                </el-tooltip>
                <span style="float:right;margin-right:15px;color: #c2c2c2;" v-show="!node.data.edit && !addTemplate">
                  {{ node.data.Count }}
                </span>
              </div>
              <div v-show="node.level > 1" style="align-items: center;justify-content: space-between;width: 100%;font-size:14px">
                <span style="width: 7px;height: 7px;border-radius: 50%;background-color: #e5e5e5;display: inline-block;margin-right: 5px;"></span>
                <el-tooltip effect="dark" :content="node.label" placement="left" v-show="node.label.length > 5" style="display:inline-block">
                  <span class="ellipsis">{{ node.label }}</span>
                </el-tooltip>
                <span v-show="node.label.length <= 5">{{ node.label }}</span>
                <span style="float:right;margin-right:15px;color: #c2c2c2;" v-show="!node.data.edit">
                  {{ node.data.Count }}
                </span>
              </div>
              <i class="el-icon-delete" style="margin-right:15px;font-size:13px;" slot="reference"  @click="deleteItem(node)" v-show="node.level > 1 && node.data.edit"/>
            </span>
          </span>
          <span></span>
        </el-tree>
      </div>
    </div>
    <div class="ssb-eh__close" v-show="!isHidden">
      <i class="el-icon-arrow-left" @click.stop="toggleVisibility"/>
    </div>
    <div class="ssb-eh__close" v-show="isHidden">
      <i class="el-icon-arrow-right" @click.stop="toggleVisibility"/>
    </div>
    <el-dialog 
      :close-on-click-modal="false" 
      :close-on-press-escape="false" 
      :title="Action === 1 ? `新增${dialogName}` : `修改${dialogName}`" 
      :visible.sync="moderVisible"
      v-el-drag-dialog  
      width="30%">
      <el-form label-width="120px" :rules="rules" :model="partition" ref="partition">
        <el-form-item :label="`${dialogName}名称`" prop="Name">
          <el-input :placeholder="`请输入${dialogName}名称`" maxlength="10" v-model="partition.Name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit()">确 定</el-button>
        <el-button type="info" @click="moderVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from "@/directive/el-drag-dialog"; // base on element-ui
import draggable from 'vuedraggable'
export default {
  directives: { elDragDialog },
  components: { draggable },
  props: {
    nodeData: {
      type: Array,
      default() {
        return []
      }
    },
    addTemplate: {
      type: Boolean,
      default() {
        return true
      }
    },
    choseNode: {
      type: String,
      default() {
        return null
      }
    },
    defaultExpandAll: {
      type: Boolean,
      default() {
        return true
      }
    },
    expandArray:{
      type: Array,
      default() {
        return []
      }
    },
    defaultProps:{
      type: Object,
      default() {
        return {
          children: 'Children',
          label: 'Name',
          Count: 'Count'
        }
      }
    },
    dialogName:{
      type: String,
      default() {
        return '分区'
      }
    }
  },
  data(){
    return {
      Action: 1,
      moderVisible: false,
      isHidden: false,
      rules: {
        Name: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ]
      },
      partition: {},
    }
  },
  methods: {
    handleNodeClick(data, node) {
      this.$emit('handleNodeClick', {data, node})
    },
    addNew(){
      this.Action = 1
      this.partition = {},
      this.$nextTick(() => {
        this.$refs.partition.clearValidate();
      })
      this.moderVisible = true
    },
    editItem(Name){
      this.Action = 2
      this.$set(this.partition, 'Name', Name)
      this.$nextTick(() => {
        this.$refs.partition.clearValidate();
      })
      this.moderVisible = true
    },
    deleteItem(node){
      this.$confirm(`此操作将永久删除该${this.dialogName}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit('deleteNode', node.data)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    submit(){
      this.$refs['partition'].validate((valid) => {
        if (valid) {
          this.$emit('submitTemplete', {...this.partition, Action: this.Action})
        } else {
          return false;
        }
      })
    },
    toggleVisibility() {
      this.isHidden = !this.isHidden;
      this.$emit('toggleVisibility', this.isHidden)
    },
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-tree-node__content{
  height: 38px;
  line-height: 38px;
  font-size: 15px;
}
.blue-on-hover:hover {
  color: #62bfff;
  /* cursor: pointer; */
}
.content {
  animation: fadeInOut 0.5s ease; /* 动画名称、持续时间、过渡曲线 */
  width: 240px; /* 初始状态 */
}
.hidden {
  animation: fadeInOut 0.5s ease; /* 动画名称、持续时间、过渡曲线 */
  width: 240px; /* 初始状态 */
}
@keyframes fadeInOut {
  0% {
    opacity: 240px; /* 起始状态 */
  }
  100% {
    opacity: 0px; /* 结束状态 */
  }
}
.ssb-eh__close {
  width: 20px;
  flex: 0 0 20px;
  text-align: center;
  line-height: 32px;
  background: #FFFFFF;
  box-shadow: 4px 0 16px 1px #3634651a;
  border-radius: 0 6px 6px 0;
  border: 1px solid #E5E5E5;
  border-left: none;
  cursor: pointer;
  color: #141414;
  top: 350px;
  left: 20px;
  height: 30px;
  position: absolute;
}
/* 限制文本宽度为 5 个字，超出部分显示省略号 */
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 12px;
  width: 5em !important; /* 一个汉字宽度约为 1em，可以根据需要调整宽度 */
}

</style>
